<template>
	<view class="container">
		<u-form :model="form" :rules="rules" ref="uForm" label-width="150">
			<!-- 商机类型 -->
			<u-form-item :label="fields.busiOppoType.label" required  prop="busiOppoType">
				<u-input v-model="form.busiOppoType" type="select" placeholder="请输入商机类型" @click="sjTypeShow = true" />
			</u-form-item>

			<!-- 客户代码 -->
		<!-- 	<u-form-item :label="fields.cusCode.label" :prop="fields.cusCode.prop">
				<u-input v-model="form.cusCode" :disabled="isDetail" placeholder="请输入客户代码" type="select" @click="custShow = true" />
			</u-form-item> -->

			<!-- 客户名称 -->
			<u-form-item :label="fields.cusName.label" required  prop="cusName">
				<u-input v-model="form.cusName" placeholder="请输入客户名称" />
			</u-form-item>

			<!-- 客户描述 -->
			<u-form-item :label="fields.cusDesc.label" required  :prop="fields.cusDesc.prop">
				<u-input v-model="form.cusDesc" type="textarea" placeholder="请输入客户描述" />
			</u-form-item>

			<!-- 联系方式 -->
			<u-form-item :label="fields.cusMobile.label" required  :prop="fields.cusMobile.prop">
				<u-input v-model="form.cusMobile" placeholder="请输入联系方式" />
			</u-form-item>

			<!-- 省份 -->
			<u-form-item label="省市区" required prop="cusAddress" >
				<u-input v-model="form.cusAllAddress" type="select" placeholder="请选择" @click="openAddr" />
			</u-form-item>

			<!-- 城市 -->
			<!-- <u-form-item :label="fields.cusCity.label" :prop="fields.cusCity.prop">
				<u-input v-model="form.cusCity" type="select" placeholder="请输入城市" />
			</u-form-item> -->

			<!-- 区县 -->
		<!-- 	<u-form-item :label="fields.cusAddress.label" :prop="fields.cusAddress.prop">
				<u-input v-model="form.cusAddress" type="select" placeholder="请选择区县" />
			</u-form-item> -->
			
			<!-- 客户地址 -->
			<u-form-item :label="fields.biz4.label" required  :prop="fields.biz4.prop">
				<u-input v-model="form.biz4" placeholder="请输入客户地址" />
			</u-form-item>

			<!-- 产品意向 -->
			<u-form-item :label="fields.buyIntention.label" required  :prop="fields.buyIntention.prop">
				<u-input v-model="form.buyIntention" placeholder="请输入产品意向" />
			</u-form-item>

			<!-- 提出人 -->
			<u-form-item :label="fields.discoverMan.label" required  :prop="fields.discoverMan.prop">
				<u-input v-model="form.biz2"  type="select" placeholder="请输入提出人" @click="openPersonDis" />
			</u-form-item>

			<!-- 当前跟踪人 -->
			<u-form-item :label="fields.currTraceMan.label" required  :prop="fields.currTraceMan.prop">
				<u-input v-model="form.biz3" type="select" placeholder="请输入当前跟踪人" @click="openPersonCurr" />
			</u-form-item>

			<!-- 状态 -->
			<u-form-item :label="fields.cusStatus.label" :prop="fields.cusStatus.prop" v-if="isDetail">
				<u-input v-model="form.statusName" :disabled="isDetail" placeholder="请输入状态" />
			</u-form-item>
		</u-form>

		<!-- 底部按钮 -->
		<view class="footer">
			<u-button type="primary" @click="submitForm">提交</u-button>
			<!-- <u-button style="margin-left: 20rpx;" @click="">查看进程</u-button> -->
		</view>
		
		<u-select v-model="sjTypeShow" :list="sjTypeList" @confirm="sjTypeConfirm"></u-select>
		<u-select v-model="personDisShow" :list="personList" @confirm="disConfirm"></u-select>
		<u-select v-model="personCurrShow" :list="personList" @confirm="currConfirm"></u-select>
		<u-picker mode="region" v-model="addrShow" @confirm="addrConfirm"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 页面模式：'add' 新增，'detail' 详情
				mode: 'add',
				sjTypeShow: false,
				personDisShow: false,
				personCurrShow: false,
				addrShow: false,
				personList: [],
				sjTypeList: [
					{label : "公海",value: '公海'},
					{label : "私海",value: '私海'},
				],
				// 表单字段配置
				fields: {
					busiOppoType: {
						label: '商机类型',
						prop: 'busiOppoType',
						search: true
					},
					cusCode: {
						label: '客户代码',
						prop: 'cusCode'
					},
					cusName: {
						label: '客户名称',
						prop: 'cusName'
					},
					cusDesc: {
						label: '客户描述',
						prop: 'cusDesc'
					},
					cusMobile: {
						label: '联系方式',
						prop: 'cusMobile'
					},
					cusProvince: {
						label: '省份',
						prop: 'cusProvince'
					},
					cusCity: {
						label: '城市',
						prop: 'cusCity'
					},
					cusAddress: {
						label: '区县',
						prop: 'cusAddress'
					},
					biz4: {
						label: '地址',
						prop: 'biz4'
					},
					buyIntention: {
						label: '产品意向',
						prop: 'buyIntention'
					},
					discoverMan: {
						label: '提出人',
						prop: 'discoverMan',
						name: 'biz2'
					},
					currTraceMan: {
						label: '当前跟踪人',
						prop: 'currTraceMan',
						name: 'biz3'
					},
					cusStatus: {
						label: '状态',
						prop: 'cusStatus'
					}
				},
				// 表单数据
				form: {
					busiOppoType: '',
					cusCode: '',
					cusName: '',
					cusDesc: '',
					cusMobile: '',
					cusProvince: '',
					cusCity: '',
					cusAddress: '',
					buyIntention: '',
					discoverMan: '',
					currTraceMan: '',
					cusAllAddress: '',
					cusStatus: '',
					biz4: '',
					biz2: '',
					biz3: ''
				},
				// 表单验证规则
				rules: {
					busiOppoType: [{
						required: true,
						message: '请输入商机类型',
						trigger: 'change'
					}],
					cusName: [{
						required: true,
						message: '请输入客户名称',
						trigger: 'blur'
					}],
					cusAddress: [{
						required: true,
						message: '请选择省市区',
						trigger: 'change'
					}],
					cusDesc: [{
						required: true,
						message: '请输入客户描述',
						trigger: 'blur'
					}],
					biz4: [{
						required: true,
						message: '请输入客户地址',
						trigger: 'blur'
					}],
					buyIntention: [{
						required: true,
						message: '请输入产品意向',
						trigger: 'blur'
					}],
					currTraceMan: [{
						required: true,
						message: '请选择当前跟踪人',
						trigger: 'change'
					}],
					discoverMan: [{
						required: true,
						message: '请选择提出人',
						trigger: 'change'
					}],
					cusMobile: [{
							required: true,
							message: '请输入联系方式',
							trigger: 'blur'
						},
						{
							validator: (rule, value, callback) => {
								if (!/^1[3-9]\d{9}$/.test(value)) {
									callback(new Error('手机号格式不正确'))
								} else {
									callback()
								}
							},
							trigger: 'blur'
						}
					]
				}
			}
		},
		computed: {
			// 是否是详情模式
			isDetail() {
				return this.mode === 'detail'
			}
		},
		onLoad(options) {
			console.log("options",options);
			// 根据传入参数判断模式
			if (options.mode) {
				this.mode = options.mode

				this.$api.user.getBaseEmpPage({
					
				}).then((res) => {
					console.log("res",res);
					this.personList = [];
					res.records.forEach((item) => {
						this.personList.push(
							{
								value: item.empNo,
								label: item.empName
							}
						)
					})
				})
				// 如果是详情模式，获取数据
				if (this.isDetail) {
					this.getDetailData(options.id)
				}
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			// 获取详情数据
			getDetailData(id) {
				let _this = this;
				uni.getStorage({
					key: 'OppoDetail',
					success: function (res) {
						console.log(res.data);
						_this.form = res.data
						_this.form.cusAllAddress = _this.form.cusProvince + _this.form.cusCity + _this.form.cusAddress
					}
				});
			},
			openAddr(){
				this.addrShow = true
			},
			openPersonCurr(){
				this.personCurrShow = true
			},
			openPersonDis(){
				if(!this.isDetail){
					this.personDisShow = true
				}
			},
			sjTypeConfirm(params){
				this.form.busiOppoType = params[0].value
			},
			disConfirm(params){
				this.form.discoverMan = params[0].value
				this.form.biz2 = params[0].label
			},
			currConfirm(params){
				console.log(params);
				this.form.currTraceMan = params[0].value
				this.form.biz3 = params[0].label
			},
			addrConfirm(params){
				console.log(params);
				this.form.cusProvince = params.province.label
				this.form.cusCity = params.city.label
				this.form.cusAddress = params.area.label
				this.form.cusAllAddress = this.form.cusProvince + this.form.cusCity + this.form.cusAddress
			},
			// 提交表单
			submitForm() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						// 表单验证通过，提交数据
						console.log('表单数据:', this.form)
						if(this.form.id){
							this.$api.user.updBusiOppo({
								...this.form
							}).then((res) => {
								uni.showToast({
									title: '提交成功',
									icon: 'success'
								})
								
								// 提交成功后返回上一页
								setTimeout(() => {
									uni.navigateBack()
								}, 1500)
							})
						}else{
							this.$api.user.addBusiOppo({
								...this.form,
								id: this.wfy.uuid(32),
								cusStatus: '2'
							}).then((res) => {
								uni.showToast({
									title: '提交成功',
									icon: 'success'
								})
								// 提交成功后返回上一页
								setTimeout(() => {
									uni.navigateBack()
								}, 1500)
							})
						}
						
					} else {
						console.log('验证失败')
					}
				})
			},

			// 重置表单
			resetForm() {
				this.$refs.uForm.resetFields()
			}
		}
	}
</script>

<style scoped>
	.container {
		padding: 20rpx;
		padding-bottom: 120rpx;
	}

	.footer {
		margin-top: 40rpx;
		display: flex;
		justify-content: center;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 20rpx 0;
		background-color: #fff;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
	}
</style>